<template>
    <section class="push-money-main base-main">
      <Search v-if="type == 1 && data.length > 0" :placeholderText="placeholderText" @clickSearch="clickSearch"></Search>
      <div class="title fs13 color7A7B82" v-if="data.length > 0">
        <span>
          销售员({{offLineNum}})/加入时间
        </span>
        <span class="pr text-r" @click="handleSort">
          总创造提成(元)&nbsp;
          <i :class="isAscending == 1 ? 'color7E82F6' : 'colorC5C5CC'" class="top pa iconfont iconiconfontordinaryshangjiantou-copy"></i>
          <i :class="isAscending == 2 ? 'color7E82F6' : 'colorC5C5CC'" class="down pa iconfont iconiconfontordinaryshangjiantou-copy-copy"></i>
        </span>
      </div>
      <pull-up-reload
        v-if="data.length > 0"
        :on-infinite-load="onInfiniteLoad"
        :parent-pull-up-state="infiniteLoadData.pullUpState"
        style="padding-bottom: 0px;">
        <div class="earnings-list bgcFFF">
          <PushMoneyList :data="data"></PushMoneyList>
        </div>
      </pull-up-reload>

      <noneData :show="data.length <= 0 ? true : false" text="没有找到相关数据"></noneData>
    </section>
</template>

<script type="text/ecmascript-6">
  import PullUpReload from '../../components/PullUpReload.vue'
  import Search from '../../components/Search.vue'
  import PushMoneyList from '../../components/PushMoneyList.vue'
  import noneData from '../../components/noneData.vue'


  export default {
    components: {
      PullUpReload,Search,PushMoneyList,noneData
    },
    data() {
      return {
        accumulatedIncome:228000,//累计收益
        isAscending:0,//是否升序,1降序，2升序
        data:[
          {
            id:1,
            name: '张三丰',
            img: 'https://p.ssl.qhimg.com/dmfd/125_71_75/t0163c32a1c9fe15f9e.webp?size=611x409',
            mobile: '13695874521',
            created_time: '2019/06/24',
            amount: 200.00,
          },
          {
            id:2,
            name: '张三丰',
            img: 'https://p.ssl.qhimg.com/dmfd/125_71_75/t0163c32a1c9fe15f9e.webp?size=611x409',
            mobile: '13695874521',
            created_time: '2019/06/24',
            amount: 200.00,
          },
          {
            id:3,
            name: '张三丰',
            img: 'https://p.ssl.qhimg.com/dmfd/125_71_75/t0163c32a1c9fe15f9e.webp?size=611x409',
            mobile: '13695874521',
            created_time: '2019/06/24',
            amount: 200.00,
          },
        ],//收益列表
        placeholderText:'搜索销售员',
        offLineNum:245,//下线数量
        type: this.$route.query.type,//
        page:0,
        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 3, // 初始显示多少条
          everyLoadingNum: 3, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        }
      }
    },
    filters:{
      thousands(num){
        num = num.toString();   //将输入的数字转换为字符串
        if(/^-?\d+\.?\d+$/.test(num)){  //判断输入内容是否为整数或小数
          if(/^-?\d+$/.test(num)){    //判断输入内容是否为整数
            num =num + ",00";   //将整数转为精度为2的小数，并将小数点换成逗号
          }else{
            num = num.replace(/\./,',');    //将小数的小数点换成逗号
          }
          while(/\d{4}/.test(num)){ //
            /***
             *判断是否有4个相连的数字，如果有则需要继续拆分，否则结束循环；
             *将4个相连以上的数字分成两组，第一组$1是前面所有的数字（负数则有符号），
             *第二组第一个逗号及其前面3个相连的数字；
             * 将第二组内容替换为“,3个相连的数字，”
             ***/
            num = num.replace(/(\d+)(\d{3}\,)/,'$1,$2');
          }
          num = num.replace(/\,(\d*)$/,'.$1');   //将最后一个逗号换成小数点
        }
        return num
      },
    },
    methods: {
      //排序
      handleSort(){
        this.isAscending = this.isAscending == 0 ? 1 : (this.isAscending == 1 ? 2 : 1)
      },
      //搜索
      clickSearch(){
        this.$router.replace({
          path:'/index/web/searchSalesman',
          query:{
            type: 2
          }
        })
      },
      // 上拉加载
      onInfiniteLoad (done) {
        if (this.infiniteLoadData.pullUpState === 0) {
//          this.getPullUpMoreData()
        }
        done()
      }
    },
  }
</script>

<style scoped lang="scss">
 @import '../../assets/css/pushMoney.scss';
</style>
